<template>
  <s-layout>
    <view class="box">
      <view class="top radius card-menu" v-if="pageType != 'xf'">
        <view class="avatar">
          <image
            class="avatar-img"
            :src="companyInfo.c_image"
            mode="aspectFill"
          ></image>
          <view class="avatar-message">
            <view class="avatar-message1">{{ companyInfo.c_name }}</view>
          </view>

          <view
            class="avatar-right"
            @click="
              sheep.$router.go('/pages/qy/update', { id: companyInfo.id })
            "
          >
            <fui-tag
              :isBorder="false"
              :padding="['0rpx', '0rpx', '0rpx', '0rpx']"
              theme="plain"
              color="#fff"
              style="
                position: absolute;
                right: -10rpx;
                top: 50rpx;
                border-radius: 30rpx 0 0 30rpx;
              "
            >
            </fui-tag>
          </view>
        </view>

        <view class="top-center">
          <view class="top-center-top">
            <view class="top-center-item">
              <view
                style="
                  max-width: 10em; /* 中文约10字 */
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                企业规模： {{ companyInfo.c_company_scale }}
              </view>
            </view>
          </view>
          <view class="top-center-center">
            <view class="top-center-item">
              <view
                style="
                  max-width: 500rpx; /* 中文约10字 */
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                所属行业：{{
                  companyInfo.category_name_f +
                  "/" +
                  companyInfo.category_name_c
                }}
              </view>
            </view>
          </view>
          <view> </view>
        </view>
        <view class="top-center">
          <view class="top-center-item"></view>
          <view
            style="
              max-width: 500rpx; /* 中文约10字 */
              white-space: nowrap;
              margin-bottom: 20rpx;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            经营内容：{{ companyInfo.c_operate }}</view
          >
        </view>
        <view class="top-line"></view>
        <view class="top-bottom">
          <view class="top-bottom-left" style="color: #dddedf">
            <view class="top-bottom-left-title">经营地址：</view>
            <view class="top-bottom-left-content">{{
              companyInfo.c_address
            }}</view>
          </view>
        </view>
        <view style="height: 5rpx"></view>
      </view>

      <!-- 一级指标 -->
      <view class="indicator-container">
        <view class="tabs-wrapper">
          <fui-tabs
            :tabs="tabList"
            :current="activeIndex"
            @change="handleTabChange"
            center
            isDot
            scroll
            alignLeft
            background="#ffffff"
            selectedColor="#3772FF"
            color="#666666"
            fontWeight="600"
            scale="1.05"
          ></fui-tabs>
        </view>
        <!-- 二级指标 -->
        <view class="content-wrapper">
          <view
            v-for="(section, sIndex) in currentContent"
            :key="sIndex"
            class="indicator-section"
          >
            <view
              class="indicator-card"
              :class="{ 'indicator-card-active': section.edit }"
              @click="handleTitleClick(section)"
            >
              <view class="indicator-header">
                <view class="indicator-number">{{ section.ii_number }}</view>
                <view class="indicator-title">{{ section.ii_name }}</view>
              </view>
              <view class="indicator-icon">
                <fui-icon
                  v-if="section.edit"
                  name="arrowright"
                  :size="40"
                  color="#3772FF"
                ></fui-icon>
              </view>
            </view>

            <view
              class="indicator-status-card"
              v-if="section.assess_score != -1 && section.edit"
            >
              <view class="status-icon">
                <fui-icon name="check" :size="32" color="#4CAF50"></fui-icon>
              </view>
              <view class="status-text">已填写</view>
              <view class="score-badge"
                >总分值: {{ section.assess_score }}</view
              >
            </view>

            <!-- 三级指标（如果section.edit==true，则说明当前层级展示分数） -->
            <view
              v-if="!section.edit"
              v-for="(item, iIndex) in section.children"
              :key="iIndex"
              class="sub-indicator-section"
            >
              <view class="sub-indicator-card" @click="handleTitleClick(item)">
                <view class="sub-indicator-header">
                  <view class="sub-indicator-number">{{
                    `${section.ii_number}.${iIndex + 1}`
                  }}</view>
                  <view class="sub-indicator-title">{{ item.ii_name }}</view>
                </view>
                <view class="indicator-icon">
                  <fui-icon
                    name="arrowright"
                    :size="36"
                    color="#666666"
                  ></fui-icon>
                </view>
              </view>

              <view
                class="indicator-status-card"
                v-if="item.assess_score != -1"
              >
                <view class="status-icon">
                  <fui-icon name="check" :size="28" color="#4CAF50"></fui-icon>
                </view>
                <view class="status-text">已填写</view>
                <view class="score-badge">总分值: {{ item.assess_score }}</view>
              </view>
            </view>

            <view
              class="section-divider"
              v-if="sIndex < currentContent.length - 1"
            ></view>
          </view>

          <!-- 弹出层 -->
          <fui-bottom-popup
            :show="showPopup"
            @close="closePopup"
            background="#f8f9fc"
          >
            <view class="popup-header">
              <view class="popup-title">
                <text class="popup-title-text">{{ popupTitle }}</text>
                <!-- <view class="popup-type-badge" :class="{'radio-type': formConfig.type === 'radio', 'judgment-type': formConfig.type === 'judgment'}">
                  {{ formConfig.type === "radio" ? "单选题" : "判断题" }}
                </view> -->
              </view>
              <view class="popup-close" @click="closePopup">
                <fui-icon name="close" :size="36" color="#999"></fui-icon>
              </view>
            </view>

            <scroll-view scroll-y class="popup-scroll-view">
              <view class="popup-content">
                <!-- 动态表单内容 -->

                <!-- 单选 -->
                <view v-if="formConfig.type == 'radio'" class="form-container">
                  <fui-radio-group
                    class="form-item"
                    :value="selectedOption"
                    @change="handleRadioChange($event)"
                  >
                    <template
                      v-for="(item, index) in formConfig.fields"
                      :key="index"
                    >
                      <!-- 第一级标题 -->
                      <view v-if="!item.edit" class="level1-title-container">
                        <view class="level1-title-indicator"></view>
                        <text class="level1-title">{{ item.iic_title }}</text>
                      </view>

                      <!-- 第一级选项 -->
                      <fui-label
                        v-else
                        :key="index"
                        :margin="['20rpx', '0', '0']"
                        class="option-label"
                      >
                        <view
                          class="option-container"
                          :class="{
                            'option-selected':
                              selectedOption &&
                              selectedOption.iic_id === item.iic_id,
                          }"
                        >
                          <fui-radio
                            :checked="
                              selectedOption &&
                              selectedOption.iic_id === item.iic_id
                            "
                            :value="item"
                            color="#3772FF"
                            borderColor="#B2B2B2"
                          >
                          </fui-radio>
                          <view class="option-content">
                            <text class="option-text">{{
                              item.iic_title
                            }}</text>
                            <view v-if="item.iic_score" class="option-score">{{
                              item.iic_score
                            }}</view>
                          </view>
                        </view>
                      </fui-label>

                      <view class="options-container">
                        <!-- 第二级标题 -->
                        <view
                          v-if="!item.edit"
                          v-for="(level1, level1Index) in item.children"
                          :key="level1Index"
                          class="level1-container"
                        >
                          <view
                            v-if="!level1.edit"
                            class="level2-title-container"
                          >
                            <view class="level2-title-indicator"></view>
                            <text class="level2-title">{{
                              level1.iic_title
                            }}</text>
                          </view>

                          <!-- 第二级选项 -->
                          <fui-label
                            v-else
                            :key="level1Index"
                            :margin="['16rpx', '0', '0']"
                            class="option-label"
                          >
                            <view
                              class="option-container level2-option"
                              :class="{
                                'option-selected':
                                  selectedOption &&
                                  selectedOption.iic_id === level1.iic_id,
                              }"
                            >
                              <fui-radio
                                :checked="
                                  selectedOption &&
                                  selectedOption.iic_id === level1.iic_id
                                "
                                :value="level1"
                                color="#3772FF"
                                borderColor="#B2B2B2"
                              >
                              </fui-radio>
                              <view class="option-content">
                                <text class="option-text">{{
                                  level1.iic_title
                                }}</text>
                                <view
                                  v-if="level1.iic_score"
                                  class="option-score"
                                  >{{ level1.iic_score }}</view
                                >
                              </view>
                            </view>
                          </fui-label>

                          <!-- 三级选项 -->
                          <fui-label
                            v-if="!level1.edit"
                            v-for="(option, optionIndex) in level1.children"
                            :key="optionIndex"
                            :margin="['16rpx', '0', '0']"
                            class="option-label"
                          >
                            <view
                              class="option-container level3-option"
                              :class="{
                                'option-selected':
                                  selectedOption &&
                                  selectedOption.iic_id === option.iic_id,
                              }"
                            >
                              <fui-radio
                                :checked="
                                  selectedOption &&
                                  selectedOption.iic_id === option.iic_id
                                "
                                :value="option"
                                color="#3772FF"
                                borderColor="#B2B2B2"
                              >
                              </fui-radio>
                              <view class="option-content">
                                <text class="option-text">{{
                                  option.iic_title
                                }}</text>
                                <view
                                  v-if="option.iic_score"
                                  class="option-score"
                                  >{{ option.iic_score }}</view
                                >
                              </view>
                            </view>
                          </fui-label>
                        </view>
                      </view>

                      <view class="notes-container" v-if="item.notes">
                        <view class="notes-icon">
                          <fui-icon
                            name="info"
                            :size="32"
                            color="#3772FF"
                          ></fui-icon>
                        </view>
                        <text class="notes-text">{{ item.notes }}</text>
                      </view>
                    </template>
                  </fui-radio-group>
                </view>

                <!-- 判断 -->
                <view
                  v-if="formConfig.type == 'judgment'"
                  class="form-container"
                >
                  <fui-radio-group
                    class="form-item"
                    @change="(e) => handleRadioGroupChange(e, formConfig.ii_id)"
                  >
                    <template
                      v-for="(item, index) in formConfig.fields"
                      :key="index"
                    >
                      <!-- 第一级标题 -->
                      <view v-if="!item.edit" class="level1-title-container">
                        <view class="level1-title-indicator"></view>
                        <text class="level1-title">{{ item.iic_title }}</text>
                      </view>

                      <!-- 第一级选项 -->
                      <fui-label
                        v-else
                        :key="index"
                        :margin="['20rpx', '0', '0']"
                        class="option-label"
                      >
                        <view
                          class="option-container"
                          :class="{
                            'option-selected': radioSelections.some(
                              (selection) =>
                                selection.groupId === formConfig.ii_id &&
                                JSON.stringify(selection.selectedItem) ===
                                  JSON.stringify(item)
                            ),
                          }"
                        >
                          <fui-radio
                            :checked="
                              radioSelections.some(
                                (selection) =>
                                  selection.groupId === formConfig.ii_id &&
                                  JSON.stringify(selection.selectedItem) ===
                                    JSON.stringify(item)
                              )
                            "
                            :value="item"
                            color="#3772FF"
                            borderColor="#B2B2B2"
                          >
                          </fui-radio>
                          <view class="option-content">
                            <text class="option-text">{{
                              item.iic_title
                            }}</text>
                            <view v-if="item.iic_score" class="option-score">{{
                              item.iic_score
                            }}</view>
                          </view>
                        </view>
                      </fui-label>

                      <view class="options-container">
                        <!-- 第二级标题 -->
                        <fui-radio-group
                          class="form-item"
                          @change="
                            (e) => handleRadioGroupChange(e, item.iic_id)
                          "
                        >
                          <view
                            v-if="!item.edit"
                            v-for="(level1, level1Index) in item.children"
                            :key="level1Index"
                            class="level1-container"
                          >
                            <view
                              v-if="!level1.edit"
                              class="level2-title-container"
                            >
                              <view class="level2-title-indicator"></view>
                              <text class="level2-title">{{
                                level1.iic_title
                              }}</text>
                            </view>

                            <!-- 第二级选项 -->
                            <fui-label
                              v-else
                              :key="level1Index"
                              :margin="['16rpx', '0', '0']"
                              class="option-label"
                            >
                              <view
                                class="option-container level2-option"
                                :class="{
                                  'option-selected': radioSelections.some(
                                    (selection) =>
                                      selection.groupId === item.iic_id &&
                                      JSON.stringify(selection.selectedItem) ===
                                        JSON.stringify(level1)
                                  ),
                                }"
                              >
                                <fui-radio
                                  :checked="
                                    radioSelections.some(
                                      (selection) =>
                                        selection.groupId === item.iic_id &&
                                        JSON.stringify(
                                          selection.selectedItem
                                        ) === JSON.stringify(level1)
                                    )
                                  "
                                  :value="level1"
                                  color="#3772FF"
                                  borderColor="#B2B2B2"
                                >
                                </fui-radio>
                                <view class="option-content">
                                  <text class="option-text">{{
                                    level1.iic_title
                                  }}</text>
                                  <view
                                    v-if="level1.iic_score"
                                    class="option-score"
                                    >{{ level1.iic_score }}</view
                                  >
                                </view>
                              </view>
                            </fui-label>

                            <!-- 第三级选项 -->
                            <fui-radio-group
                              v-if="!level1.edit"
                              class="form-item"
                              @change="
                                (e) => handleRadioGroupChange(e, level1.iic_id)
                              "
                            >
                              <fui-label
                                v-for="(option, optionIndex) in level1.children"
                                :key="optionIndex"
                                :margin="['16rpx', '0', '0']"
                                class="option-label"
                              >
                                <view
                                  class="option-container level3-option"
                                  :class="{
                                    'option-selected': radioSelections.some(
                                      (selection) =>
                                        selection.groupId === level1.iic_id &&
                                        JSON.stringify(
                                          selection.selectedItem
                                        ) === JSON.stringify(option)
                                    ),
                                  }"
                                >
                                  <fui-radio
                                    :checked="
                                      radioSelections.some(
                                        (selection) =>
                                          selection.groupId === level1.iic_id &&
                                          JSON.stringify(
                                            selection.selectedItem
                                          ) === JSON.stringify(option)
                                      )
                                    "
                                    :value="option"
                                    color="#3772FF"
                                    borderColor="#B2B2B2"
                                  >
                                  </fui-radio>
                                  <view class="option-content">
                                    <text class="option-text">{{
                                      option.iic_title
                                    }}</text>
                                    <view
                                      v-if="option.iic_score"
                                      class="option-score"
                                      >{{ option.iic_score }}</view
                                    >
                                  </view>
                                </view>
                              </fui-label>
                            </fui-radio-group>
                          </view>
                        </fui-radio-group>
                      </view>

                      <view class="notes-container" v-if="item.notes">
                        <view class="notes-icon">
                          <fui-icon
                            name="info"
                            :size="32"
                            color="#3772FF"
                          ></fui-icon>
                        </view>
                        <text class="notes-text">{{ item.notes }}</text>
                      </view>
                    </template>
                  </fui-radio-group>

                  <!-- 显示已选择的判断 -->
                  <view
                    v-if="radioSelections.length > 0"
                    class="selections-summary"
                  >
                    <view class="selections-header">
                      <view class="selections-icon">
                        <fui-icon
                          name="check"
                          :size="32"
                          color="#4CAF50"
                        ></fui-icon>
                      </view>
                      <text class="selections-title">已选择的项目</text>
                    </view>
                    <view class="selections-list">
                      <view
                        v-for="(selection, index) in radioSelections"
                        :key="index"
                        class="selection-item"
                      >
                        <view class="selection-number">{{ index + 1 }}</view>
                        <view class="selection-content">
                          <text class="selection-text">{{
                            getRadioSelectionLabel(selection)
                          }}</text>
                          <view
                            v-if="getRadioSelectionScore(selection)"
                            class="selection-score"
                          >
                            {{ getRadioSelectionScore(selection) }}
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>

                <!-- 显示已选择的单选 -->
                <view v-if="selectedOption" class="selected-summary">
                  <view class="selected-header">
                    <view class="selected-icon">
                      <fui-icon
                        name="check"
                        :size="32"
                        color="#4CAF50"
                      ></fui-icon>
                    </view>
                    <text class="selected-title">已选择</text>
                  </view>
                  <view class="selected-content">
                    <text class="selected-text">{{
                      selectedOption.iic_title
                    }}</text>
                    <view
                      v-if="selectedOption.iic_score"
                      class="selected-score"
                    >
                      {{ selectedOption.iic_score }}
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>

            <view class="popup-footer" v-if="formConfig.fields.length > 0">
              <fui-button
                @click="handleSubmit"
                radius="96rpx"
                background="linear-gradient(45deg, #3772FF, #5289FF)"
                color="#fff"
                height="80rpx"
                width="550rpx"
              >
                <view class="submit-button-content">
                  <fui-icon name="check" :size="28" color="#fff"></fui-icon>
                  <text class="submit-text">提交评估</text>
                </view>
              </fui-button>
            </view>
          </fui-bottom-popup>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, computed, reactive } from "vue";
import sheep from "@/sheep";
import { onLoad } from "@dcloudio/uni-app";
import { get } from "lodash";

const pageType = ref("");

// ==================== 公司信息相关 ====================

// 公司基本信息
const companyInfo = ref({
  id: 1,
  name: "海东路第一加油站",
  address: "北京东城区新区",
  phone: "18702362584",
  legal: "张俊杰",
  company_scale: "10人",
  category_id_f: "石油行业",
  category_id_c: "加油站",
  operate: "经营",
  risk_type: "风险类型",
});

// 请求参数
const params = ref(null);

// ==================== 评估指标相关 ====================

// 弹出框状态
const showPopup = ref(false);
const popupTitle = ref(""); // 弹出框标题
const inputValue = ref(""); // 输入内容
const currentItem = ref(null); // 记录当前点击的标题
const taskInfo = ref({}); // 记录当前任务信息
const selectedOption = ref(null); // 当前选中的单个选项

// 指标数据
const tabList = ref([
  { id: 1, name: "单位基本情况" },
  { id: 2, name: "区域火灾形式" },
  { id: 3, name: "单位火灾形式" },
]);

const contentList = ref([
  {
    tabId: 1,
    sections: [
      {
        index: "1.1",
        title: "单位性质",
        items: [
          {
            title: "建筑信息",
            items: [
              { title: "建筑年代" },
              { title: "建筑面积" },
              { title: "建筑层数" },
            ],
          },
          {
            title: "人员信息",
            items: [
              { title: "在岗员工数" },
              { title: "安全管理人员" },
              { title: "值班安排" },
            ],
          },
        ],
      },
      {
        index: "1.2",
        title: "建筑规模",
        items: [
          {
            title: "区域分布",
            items: [
              { title: "生产区" },
              { title: "办公区" },
              { title: "仓储区" },
            ],
          },
        ],
      },
    ],
  },
  {
    tabId: 2,
    sections: [
      {
        index: "2.1",
        title: "历史数据",
        items: [
          {
            title: "火灾记录",
            items: [
              { title: "近五年火灾次数" },
              { title: "季节分布特征" },
              { title: "常见起火原因" },
            ],
          },
        ],
      },
      {
        index: "2.2",
        title: "风险区域",
        items: [
          {
            title: "区域分布",
            items: [
              { title: "高风险区分布图" },
              { title: "重点监控点位" },
              { title: "危险品存放区" },
            ],
          },
        ],
      },
    ],
  },
  {
    tabId: 3,
    sections: [
      {
        index: "3.1",
        title: "电气安全",
        items: [
          {
            title: "设备检查",
            items: [
              { title: "线路老化情况" },
              { title: "大功率设备清单" },
              { title: "定期检测记录" },
            ],
          },
        ],
      },
      {
        index: "3.2",
        title: "消防设施",
        items: [
          {
            title: "设施分布",
            items: [
              { title: "灭火器分布点" },
              { title: "报警系统状态" },
              { title: "疏散通道检查" },
            ],
          },
        ],
      },
    ],
  },
]);

// 响应式状态
const activeIndex = ref(0);

// 单选和多选数据
const radioSelections = ref([]);
const firstLevelSelection = ref(null);

// 表单数据
const formData = reactive({});

// 表单配置
const formConfig = reactive({
  title: "动态表单示例",
  formData: {},
  lev: 1,
  ii_id: 1,
  fields: [
    {
      title: "姓名",
      type: "input",
      label: "姓名",
      modelKey: "name",
      placeholder: "请输入姓名",
      required: true,
      tips: "请填写真实姓名",
    },
    {
      type: "select",
      label: "城市",
      modelKey: "city",
      show: false,
      options: ["北京", "上海"],
      required: true,
    },
    {
      type: "radio",
      label: "性别",
      modelKey: "gender",
      options: [
        { value: 1, label: "男" },
        { value: 2, label: "女" },
      ],
      required: true,
    },
    {
      type: "checkbox",
      label: "爱好",
      modelKey: "hobbies",
      options: [
        { value: 1, label: "阅读" },
        { value: 2, label: "运动" },
        { value: 3, label: "音乐" },
      ],
    },
  ],
});

// ==================== 页面初始化 ====================

/**
 * 页面加载时初始化数据
 */
onLoad((options) => {
  pageType.value = "other";

  if (options.task_id) {
    console.log("[任务] 加载任务信息:", options);
    params.value = {
      company_id: options.company_id,
      task_id: options.task_id,
    };
  } else {
    params.value = {
      company_id: options.company_id,
    };
  }
  getAssessInfo(params.value);
});

// ==================== 数据加载和提交 ====================

/**
 * 获取评估数据并更新UI
 * @param {Object} params - 请求参数
 */
function getAssessInfo(params) {
  console.log("[API] 获取评估数据:", params);

  if (params.task_id) {
    sheep.$api.other.getTaskUnityAssessInfo(params).then((res) => {
      if (res.code == 200) {
        // 更新所有数据
        companyInfo.value = res.companyInfo;
        tabList.value = res.itemList;
        contentList.value = res.itemList;
        console.log("[数据] 已更新全部数据");
      } else {
        console.error("[API] 获取数据失败:", res.msg);
      }
    });
  } else {
    sheep.$api.other.getDailyUnityAssessInfo(params).then((res) => {
      if (res.code == 200) {
        // 更新所有数据
        companyInfo.value = res.companyInfo;
        tabList.value = res.itemList;
        contentList.value = res.itemList;
        console.log("[数据] 已更新全部数据");
      } else {
        console.error("[API] 获取数据失败:", res.msg);
      }
    });
  }
}

/**
 * 提交表单数据到服务器
 * @param {Object} data - 表单数据
 */
const submitFormData = (data) => {
  console.log("[API] 提交数据:", data);

  // 先保存当前标签页和滚动位置
  const currentTabIndex = activeIndex.value;

  sheep.$api.other
    .itemCriteriaEditForm(data)
    .then((res) => {
      console.log("[API] 提交结果:", res);

      if (res.code === 200) {
        // 先关闭弹窗
        closePopup();
        
        // 数据更新完成后显示提示
        uni.showToast({
          title: "提交成功",
          icon: "success",
          duration: 1500,
        });

        // 全量更新数据
        getAssessInfo(params.value);

        // 保持当前标签页选中状态
        activeIndex.value = currentTabIndex;
      } else {
        uni.showToast({
          title: res.msg || "提交失败",
          icon: "none",
          duration: 1500,
        });
        closePopup();
      }
    })
    .catch((err) => {
      console.error("[API] 提交出错:", err);
      uni.showToast({
        title: "网络错误，请重试",
        icon: "none",
        duration: 1500,
      });
      closePopup();
    });
};

// ==================== 指标UI交互 ====================

/**
 * 计算当前内容
 * @returns {Array} 当前选中标签对应的内容
 */
const currentContent = computed(() => {
  const selectedTabId = tabList.value[activeIndex.value].id;
  const content = contentList.value.find(
    (item) => item.ii_id === selectedTabId
  );
  return content?.children || [];
});

/**
 * 处理标签切换事件
 * @param {Object} event - 标签切换事件对象
 */
const handleTabChange = (event) => {
  activeIndex.value = event.index;
};

/**
 * 打开弹出框
 * @param {Object} item - 点击的项目
 */
const handleTitleClick = (item) => {
  currentItem.value = item;
  popupTitle.value = item.ii_number + item.ii_name;

  console.log("[表单] 选中项:", item);

  const params = {
    item_id: item.ii_id,
    item_type: item.ii_type,
    object_id: 1,
  };

  sheep.$api.other.getItemCriteriaEdit(params).then((res) => {
    console.log("[API] 获取表单详情:", res);
    formConfig.ii_id = item.ii_id;

    if (item.ii_type == 3) {
      // 单选类型表单
      formConfig.type = "radio";
      formConfig.fields = res.data;

      // 设置flag=1的选项为默认选中，添加到selectedOption.value
      const findAndSelectDefaultOption = (items) => {
        for (const item of items) {
          if (item.flag == 1) {
            selectedOption.value = item;
            return true;
          }

          if (item.children && item.children.length > 0) {
            const found = findAndSelectDefaultOption(item.children);
            if (found) return true;
          }
        }
        return false;
      };
      findAndSelectDefaultOption(formConfig.fields);

      console.log("[表单] 默认选中项:", selectedOption.value);
    } else if (item.ii_type == 4) {
      // 判断类型表单
      formConfig.type = "judgment";
      formConfig.fields = res.data;

      // 遍历树结构，找到flag=1的选项并添加到radioSelections中
      const findAndAddFlaggedItems = (items, parentId = null) => {
        for (const item of items) {
          if (item.flag === 1) {
            const groupId = parentId || formConfig.ii_id;

            // 检查是否已存在
            const existingIndex = radioSelections.value.findIndex(
              (selection) => selection.groupId === groupId
            );

            if (existingIndex !== -1) {
              radioSelections.value[existingIndex] = {
                groupId: groupId,
                selectedItem: item,
              };
            } else {
              radioSelections.value.push({
                groupId: groupId,
                selectedItem: item,
              });
            }
          }

          if (item.children && item.children.length > 0) {
            findAndAddFlaggedItems(item.children, item.iic_id);
          }
        }
      };

      // 重置选择，然后添加标记的项目
      radioSelections.value = [];
      findAndAddFlaggedItems(formConfig.fields);
      console.log("[表单] 已选中项:", radioSelections.value);
    } else {
      // 其他类型表单（回显值）
      formConfig.fields = res.data.map(({ ba_id, ...rest }) => ({
        type: "input",
        title: item.ii_name,
        label: item.ii_name,
        placeholder: "请输入" + item.ii_name,
        modelKey: ba_id,
        ...rest,
      }));
    }

    showPopup.value = true;
    console.log("[表单] 表单字段初始化完成");
  });
};

/**
 * 关闭弹出框并重置相关状态
 */
const closePopup = () => {
  showPopup.value = false;
  inputValue.value = ""; // 清空输入框
  selectedOption.value = null; // 清空select模式的选择
  radioSelections.value = []; // 清空radio模式的选择

  // 清空formData中的数据
  Object.keys(formData).forEach((key) => {
    formData[key] = null;
  });
};

/**
 * 提交表单处理
 */
const handleSubmit = () => {
  // 根据表单类型进行不同的提交处理
  if (formConfig.type === "radio") {
    // 单选类型: 只能选择一个选项
    if (!selectedOption.value) {
      uni.showToast({
        title: "请选择一个选项",
        icon: "none",
      });
      return;
    }

    // 创建包含选中选项信息的对象
    const dataObj = {
      criteria_id: selectedOption.value.iic_id || "",
      criteria_score: selectedOption.value.iic_score || "",
    };

    console.log("[表单] 单选类型提交数据:", dataObj);

    const data = {
      item_id: currentItem.value.ii_id,
      version_id: currentItem.value.version_id,
      object_id: companyInfo.value.c_id,
      criteria_arr: JSON.stringify([dataObj]), // 只包含一个对象的数组
    };

    submitFormData(data);
  } else if (formConfig.type === "judgment") {
    // 判断类型: 可以选择多个选项组
    if (radioSelections.value.length === 0) {
      uni.showToast({
        title: "请至少选择一个选项",
        icon: "none",
      });
      return;
    }

    // 创建多个对象，每个选择组一个对象
    const criteriaArr = [];

    // 遍历所有选择
    radioSelections.value.forEach((selection) => {
      // 查找选项的分数
      const score = getRadioSelectionScore(selection.selectedItem);
      console.log("[表单] 选中项ID:", selection.selectedItem.iic_id);

      // 添加到数组中
      criteriaArr.push({
        criteria_id: selection.selectedItem.iic_id,
        criteria_score: score || "",
      });
    });

    console.log("[表单] 判断类型提交数据:", criteriaArr);

    const data = {
      item_id: currentItem.value.ii_id,
      version_id: currentItem.value.version_id,
      object_id: companyInfo.value.c_id,
      criteria_arr: JSON.stringify(criteriaArr), // 包含多个对象的数组
    };

    submitFormData(data);
  }
};

// ==================== 表单交互处理 ====================

/**
 * 单选按钮组改变处理
 */
const handleRadioChange = (event) => {
  // 获取选中项
  const selected = event.detail.value;
  console.log("[表单] 选中项:", selected);

  // 更新selectedOption为当前选中的选项对象
  selectedOption.value = selected;

  // 清空formData中的其他选项，只保留当前选中的
  formData[selected.iic_id] = selected;

  console.log(
    `[表单] 已选择: ${selected.iic_title}, ID: ${selected.iic_id}, 分值: ${
      selected.iic_score || "无"
    }`
  );
};

/**
 * 处理判断按钮组变化
 */
const handleRadioGroupChange = (event, iic_id) => {
  const selected = event.detail.value;
  console.log("[表单] 选中值:", selected, "父级ID:", iic_id);

  // 检查是否已存在该iic_id的选择
  const existingIndex = radioSelections.value.findIndex(
    (item) => item.groupId === iic_id
  );

  if (existingIndex !== -1) {
    // 如果已存在，则更新该条目
    radioSelections.value[existingIndex] = {
      groupId: iic_id,
      selectedItem: selected,
    };
  } else {
    // 如果不存在，则添加新条目
    radioSelections.value.push({ groupId: iic_id, selectedItem: selected });
  }
};

/**
 * 处理第一级选择变化
 * @param {Object} event - 变化事件对象
 */
const handleFirstLevelChange = (event) => {
  firstLevelSelection.value = event.detail.value;
};

/**
 * 获取判断选项的标签文本
 * @param {Object} selection - 选中的选项对象
 * @returns {string} 选项的显示文本
 */
const getRadioSelectionLabel = (selection) => {
  // 在所有层级中查找选项
  const findLabelById = (items) => {
    if (!items) return null;
    for (const item of items) {
      // 直接匹配
      if (JSON.stringify(item) === JSON.stringify(selection.selectedItem)) {
        return item.iic_title || item.label;
      }

      // 在子项中查找
      if (item.children) {
        const found = findLabelById(item.children);
        if (found) return found;
      }
    }
    return null;
  };

  // 先在一级查找
  const label = findLabelById(formConfig.fields);
  return label || `选项 ${selection.selectedItem?.iic_id || "未知"}`;
};

/**
 * 获取判断选项的分数值
 * @param {Object} selection - 选中的选项对象或选项对象内的selectedItem
 * @returns {string|null} 选项的分数值，如果没有则返回null
 */
const getRadioSelectionScore = (selection) => {
  // 如果selection是一个selection对象，使用selectedItem，否则直接使用
  const item = selection.selectedItem ? selection.selectedItem : selection;

  // 在所有层级中查找选项
  const findScoreById = (items) => {
    if (!items) return null;

    for (const itemInList of items) {
      // 直接匹配
      if (JSON.stringify(itemInList) === JSON.stringify(item)) {
        return itemInList.iic_score;
      }

      // 在子项中查找
      if (itemInList.children) {
        const found = findScoreById(itemInList.children);
        if (found !== null) return found;
      }
    }
    return null;
  };

  // 在所有层级中查找
  const score = findScoreById(formConfig.fields);
  if (score) {
    console.log(`[表单] 选项分数: ${score}`);
  }
  return score;
};

/**
 * 判断是否有选中项
 * @returns {boolean} 是否有选中项
 */
const hasSelections = computed(() => {
  return radioSelections.value.length > 0;
});
</script>

<style lang="scss" scoped>
// 顶部
.box {
  /* background: linear-gradient(135deg, #dde7f6, #dde7f6 30%, #fff 70%, #f8e5d9 95%, #f8e5d9); */
  padding-top: 10rpx;
  height: 100vh;
}
.top {
  width: 96%;
  background: linear-gradient(45deg, #3772ff 0%, #7aabff 50%, #bbe1fa 100%);
  margin: 20rpx auto 0rpx auto;
  box-shadow: 4rpx 4rpx 12rpx rgba(0, 0, 0, 0.15);
}

.top-line {
  width: 92%;
  margin: 0 auto;
  border: 1.5rpx solid #ffffff49;
}

.avatar {
  display: flex;
  justify-content: start;
  align-items: center;
  position: relative;
}

.avatar-img {
  background-color: #fff;
  border-radius: 50%;
  height: 100rpx;
  width: 100rpx;
  margin: 20rpx 20rpx;
  position: relative;
  box-shadow: 4rpx 4rpx 12rpx rgba(0, 0, 0, 0.15);
}
.avatar-right {
  display: flex;
  height: 50px;
  /* background-color: #ffffffd2;
		width:250rpx; */
  right: 0rpx;
  justify-content: center;
  align-items: center;
  border-radius: 40rpx 0rpx 0rpx 40rpx;
  font-size: 26rpx;
}
.list-item-right-tag {
  position: relative;
}
.top-center {
  color: #ffffff;
  display: flex;
  font-size: 26rpx;
}
.top-center-top {
  margin-left: 30rpx;
  margin-top: 10rpx;
}
.top-center-item {
  font-size: 25rpx;
  display: flex;
  margin-right: 30rpx;
}
.top-center-center {
  margin: 020rpx;
  margin-top: 10rpx;
}
.label {
  color: #fff;
  width: 120rpx;
  font-size: 24rpx;
  border-radius: 10rpx;
}
.radius {
  border-radius: 3%;
}
.avatar-message {
  margin-left: 20rpx;
  color: #fff;
}

.avatar-message1 {
  font-size: 30rpx;
  font-weight: 600rpx;
  margin: 10rpx 0;

  display: inline-block;
  max-width: 10em; /* 中文约10字 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avatar-message2 {
  font-size: 24rpx;
}
.avatar-message2-border {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  flex: 1;
}
.avatar-message3 {
  font-size: 24rpx;

  color: #ffffffbe;
  position: relative;
}
.avatar-message5 {
  font-size: 25rpx;
  color: #666;
  position: relative;
  border: 1rpx solid #666;
  width: 100rpx;
  text-align: center;
}
.top-bottom {
  /* display: flex;
		margin: 20rpx 30rpx;
		justify-content: space-between;
		padding-bottom: 30rpx; */
  padding: 0 10rpx;
  /* background: rgba(0,0,0,0.1); */
  border-radius: 12rpx;
  /* margin: 20rpx 0; */
  width: 94%;
  margin: 20rpx auto;
}
.top-bottom-left-title {
  font-size: 26rpx;
  font-weight: 500;
  color: #fff;
  position: relative;
  top: -5rpx;

  max-width: 10em; /* 中文约10字 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-bottom-left-content {
  font-size: 26rpx;
  font-weight: 500;
  color: #fff;
  position: relative;
  top: -5rpx;

  max-width: 500rpx; /* 中文约10字 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-bottom-left {
  font-size: 25rpx;
  margin-left: 2rpx;
  display: flex;
  color: #fff;
}

// 指标部分 - 现代化UI设计
.indicator-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fc;
}

.flex {
  display: flex;
  align-items: center;
}

.tabs-wrapper {
  background-color: #fff;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  padding: 8rpx 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.content-wrapper {
  border-radius: 16rpx;
  width: 94%;
  margin: 20rpx auto;
  background-color: transparent;
}

.indicator-section {
  margin-bottom: 24rpx;
}

.indicator-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 24rpx;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.indicator-card-active {
  background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
  border-left: 8rpx solid #3772ff;
}

.indicator-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4rpx;
  background: linear-gradient(90deg, #3772ff 0%, rgba(55, 114, 255, 0.2) 100%);
  opacity: 0.7;
}

.indicator-header {
  display: flex;
  align-items: flex-start; /* 修改为顶部对齐，允许标题换行后仍能正常对齐 */
  flex: 1;
}

.indicator-number {
  font-size: 32rpx;
  font-weight: 700;
  color: #3772ff;
  background-color: rgba(55, 114, 255, 0.1);
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  margin-right: 16rpx;
  white-space: nowrap; /* 防止标题换行 */
}

.indicator-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  word-wrap: break-word; /* 允许标题换行 */
}

.indicator-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.indicator-status-card {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  background: #f0f9f0;
  border-radius: 12rpx;
  margin-top: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.sub-status {
  background: #f0f7ff;
  margin-left: 30rpx;
}

.status-icon {
  margin-right: 12rpx;
}

.status-text {
  font-size: 28rpx;
  color: #333;
  margin-right: auto;
}

.score-badge {
  background: rgba(76, 175, 80, 0.15);
  color: #4caf50;
  font-weight: 600;
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
}

.sub-indicator-section {
  margin-top: 16rpx;
  margin-left: 20rpx;
}

.sub-indicator-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 20rpx;
  background: #ffffff;
  border-radius: 14rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
  border-left: 4rpx solid #7aabff;
}

.sub-indicator-header {
  display: flex;
  align-items: flex-start; /* 修改为顶部对齐，允许标题换行后仍能正常对齐 */
  flex: 1;
}

.sub-indicator-number {
  font-size: 28rpx;
  font-weight: 600;
  color: #7aabff;
  margin-right: 12rpx;
  white-space: nowrap; /* 防止标题换行 */
}

.sub-indicator-title {
  font-size: 30rpx;
  color: #444;
  font-weight: 500;
  word-wrap: break-word; /* 允许标题换行 */
}

.section-divider {
  height: 1rpx;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  width: 92%;
  margin: 32rpx auto;
}
/* 弹出层 */
.fui-custom__wrap {
  width: 96%;
  margin: 20rpx auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.status-tag {
  width: 94%;
  margin: auto;
  padding: 15rpx 20rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  background: #f0f0f0;
  color: #666;
}
.form-item-label {
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
  font-size: 32rpx;
}

.radio-container {
  width: 100%;
  margin-top: 10rpx;
  margin-bottom: 30rpx;
}

.level1-container {
  margin-bottom: 30rpx;
  border-left: 4rpx solid #eaeaea;
  padding-left: 20rpx;
}

.level1-title {
  font-size: 33rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
  font-weight: 550;
  word-wrap: break-word; /* 允许标题换行 */
}

.level2-container {
  margin-bottom: 25rpx;
  margin-left: 20rpx;
  border-left: 4rpx solid #f0f0f0;
  padding-left: 20rpx;
}

.level2-title {
  font-size: 30rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
  font-weight: 500;
  word-wrap: break-word; /* 允许标题换行 */
}

.selected-value {
  padding: 18rpx 20rpx;
  border-radius: 12rpx;
  background: #f0f7ff;
  color: #333;
  border-left: 4rpx solid #3772ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-top: 12rpx;
}

.score-text {
  color: #3772ff;
  font-weight: bold;
  background: rgba(55, 114, 255, 0.1);
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
}

.fui-align__center {
  display: flex;
  align-items: center;
}

.fui-text {
  font-size: 28rpx;
  padding-left: 16rpx;
  color: #333;
}

.radio-selections-container {
  margin-top: 30rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #f5f8ff 0%, #ffffff 100%);
  padding: 24rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
}

.radio-selections-title {
  font-weight: bold;
  margin-bottom: 24rpx;
  font-size: 32rpx;
  color: #333;
  padding: 8rpx 16rpx;
  border-left: 6rpx solid #3772ff;
  background: rgba(55, 114, 255, 0.05);
  border-radius: 0 8rpx 8rpx 0;
}

/* 弹出层 - 现代美化版 */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 36rpx 24rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
  position: relative;
}

.popup-header::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 80%;
  height: 4rpx;
  background: linear-gradient(
    90deg,
    rgba(55, 114, 255, 0) 0%,
    rgba(55, 114, 255, 0.6) 50%,
    rgba(55, 114, 255, 0) 100%
  );
}

.popup-title {
  display: flex;
  align-items: center;
}

.popup-title-text {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.popup-type-badge {
  margin-left: 16rpx;
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.radio-type {
  background-color: rgba(55, 114, 255, 0.1);
  color: #3772ff;
}

.judgment-type {
  background-color: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.popup-close {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
}

.popup-scroll-view {
  width: 100%;
  max-height: 750rpx;
}

.popup-content {
  padding: 30rpx 36rpx;
}

.form-container {
  padding-bottom: 20rpx;
}

.level1-title-container {
  display: flex;
  align-items: center;
  margin: 36rpx 0 20rpx;
}

.level1-title-indicator {
  width: 8rpx;
  height: 36rpx;
  background: #3772ff;
  margin-right: 16rpx;
  border-radius: 4rpx;
}

.level1-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
}

.options-container {
  margin-left: 16rpx;
}

.level2-title-container {
  display: flex;
  align-items: center;
  margin: 28rpx 0 16rpx;
}

.level2-title-indicator {
  width: 6rpx;
  height: 28rpx;
  background: #5289ff;
  margin-right: 16rpx;
  border-radius: 3rpx;
}

.level2-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #444;
  word-wrap: break-word; /* 允许标题换行 */
}

.option-label {
  display: block;
  text-align: left;
  width: 100%;
}

.option-container {
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  background: #fff;
  border-radius: 12rpx;
  border: 1rpx solid rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  margin-bottom: 16rpx;
}

.level2-option {
  margin-left: 16rpx;
  border: 1rpx solid rgba(0, 0, 0, 0.06);
}

.level3-option {
  margin-left: 32rpx;
  border: 1rpx solid rgba(0, 0, 0, 0.04);
}

.option-selected {
  background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
  border: 1rpx solid rgba(55, 114, 255, 0.4);
  box-shadow: 0 4rpx 12rpx rgba(55, 114, 255, 0.15);
}

.option-content {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
}

.option-text {
  font-size: 28rpx;
  padding-left: 16rpx;
  color: #333;
  flex: 1; /* 让 option-text 占据剩余空间 */
  margin-right: 10rpx; /* 确保与 option-score 之间有间距 */
  word-break: break-all; /* 允许文字换行，适应容器宽度 */
}

.option-score {
  width: 60rpx; /* 固定宽度，可根据内容调整 */
  min-width: 60rpx; /* 确保最小宽度 */
  margin-left: 10rpx;
  font-size: 24rpx;
  padding: 2rpx 10rpx;
  background: rgba(55, 114, 255, 0.1);
  color: #3772ff;
  border-radius: 20rpx;
  font-weight: 500;
  text-align: center; /* 文字居中 */
  white-space: nowrap; /* 防止 score 文字换行 */
}

.notes-container {
  display: flex;
  align-items: flex-start;
  padding: 20rpx;
  background: rgba(55, 114, 255, 0.05);
  border-radius: 12rpx;
  margin: 16rpx 0 30rpx;
  border-left: 4rpx solid #3772ff;
}

.notes-icon {
  margin-right: 12rpx;
  padding-top: 4rpx;
}

.notes-text {
  font-size: 26rpx;
  color: #666;
  flex: 1;
  line-height: 1.5;
}

.selected-summary {
  margin-top: 30rpx;
  padding: 24rpx;
  background: #f0f7ff;
  border-radius: 16rpx;
  border-left: 6rpx solid #3772ff;
}

.selected-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.selected-icon {
  margin-right: 12rpx;
}

.selected-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.selected-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.selected-text {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.selected-score {
  background: rgba(55, 114, 255, 0.1);
  color: #3772ff;
  font-weight: 600;
  font-size: 30rpx;
  padding: 8rpx 24rpx;
  border-radius: 30rpx;
  min-width: 60rpx;
  text-align: center;
}

.selections-summary {
  margin-top: 36rpx;
  padding: 24rpx;
  background: #f0f7ff;
  border-radius: 16rpx;
  border-left: 6rpx solid #3772ff;
}

.selections-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.selections-icon {
  margin-right: 12rpx;
}

.selections-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.selections-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.selection-item {
  display: flex;
  background: #fff;
  padding: 16rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.selection-number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48rpx;
  height: 48rpx;
  background: #3772ff;
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
  border-radius: 50%;
  margin-right: 16rpx;
}

.selection-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* 允许内容换行显示 */
  gap: 10rpx; /* 在换行时添加间距 */
}

.selection-text {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  word-break: break-word; /* 允许在任意字符间换行 */
  min-width: 60%; /* 确保文本有足够的显示空间 */
}

.selection-score {
  background: rgba(55, 114, 255, 0.1);
  color: #3772ff;
  font-weight: 600;
  font-size: 26rpx;
  padding: 6rpx 20rpx;
  border-radius: 30rpx;
  min-width: 50rpx;
  text-align: center;
}

.popup-footer {
  padding: 20rpx 36rpx 40rpx;
  display: flex;
  justify-content: center;
  position: relative;
}

.popup-footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 1rpx;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

.submit-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-text {
  font-size: 30rpx;
  font-weight: 500;
}
</style>
